<template>
  <div>
    <section class="from-container">

      <el-button type="primary" size="mini" @click="add('add')">新增</el-button>
      <el-button size="mini">导入</el-button>
    </section>
    <el-table
      size="mini"
      :data="tableData1"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :header-cell-style="{
        'background-color': '#eeeeee !important',
      }"
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="index" width="50" label="序号"> </el-table-column>
      <el-table-column prop="name" label="地区名称" width="180">
      </el-table-column>
      <el-table-column prop="code" label="统一代码" width="180">
      </el-table-column>
      <el-table-column prop="type" label="级别">
        <template slot-scope="scope">
          <span>{{ scope.row.type | cityTypeFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态" align="center" width="90">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.state"
            inactive-value="0"
            active-value="1"


            @change="editState($event,scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" width="222">
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" :disabled="scope.row.type==='4'" @click="addChild(scope.row.id,scope.row.name,scope.row.type,scope.row.parentIds,scope.row)"
            >新增子级</el-link
          >
          <el-link type="primary" :underline="false" @click="edit(scope.row.id,scope.row.name,scope.row.type,scope.row.parentIds,scope.row.code)"
            >修改</el-link
          >
          <el-link type="primary" :underline="false" @click="del(scope.row.id)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"

      :page-size="100"
      layout="total,prev, pager, next, jumper"
      :total="1000"
    >
    </el-pagination> -->
    <AreaForm ref="areaForm" @refreshDataList="getAreaList1"></AreaForm>
  </div>
</template>

<script>
import AreaForm from './AreaForm'
import {getAreaList, modifyState, delArea} from '@/api/area.js'
export default {
  data () {
    return {

      // 查询参数
      params: {
        'parentId': 0,
        'delFlag': 0
      },
      maps: new Map(),
      tableData1: [
      ],
      value: true
    }
  },
  components: {
    AreaForm
  },
  methods: {
    // 获取第一层地区列表
    getList (params) {
      getAreaList(params).then(res => {
        if (res.data.code === '200') {
          for (let i = 0; i < res.data.result.list.length; i++) {
            if (res.data.result.list[i].type !== '4' || !res.data.result.list[i].type) {
              this.$set(res.data.result.list[i], 'hasChildren', true)
            }
          }

          this.tableData1 = res.data.result.list

          this.params.pageSize = res.data.result.count
        }
      })
    },
    // 地区新增
    add () {
      this.$refs.areaForm.init('add', { id: '', parent: { id: '', name: '' } })
    },
    // 新增子级
    addChild (id, name, type, parentIds, row) {
      console.log(row)
      this.$refs.areaForm.init('addChild', {
        id: id,
        parent: { id: id, name: name, type: type, parentIds: parentIds }
      })
    },
    // 修改
    edit (id, name, type, parentIds, code) {
      this.$refs.areaForm.init('edit', {
        id: id,
        parent: { id: id, name: name, type: type, parentIds: parentIds, code: code }

      })
    },
    // 删除
    del (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let parame = {
            'id': id,
            'delFlag': 1
          }
          delArea(parame).then(res => {
            this.getList({
              'parentId': 0,
              'delFlag': 0
            })
            const {tree, treeNode, resolve} = this.maps.get(this.params.parentId)
            this.load(tree, treeNode, resolve)
           }
          )
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 状态修改
    editState ($event, row) {
      console.log(row)

      modifyState(
        {
          id: row.id,
          state: row.state
        }
      ).then(res => {
        console.log(res)
        if (res.data.code === '200') {
          this.getAreaList1()
        }
      })
    },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    }, // 懒加载获取数据
    load (tree, treeNode, resolve) {
      const id = tree.id
      this.maps.set(id, {tree, treeNode, resolve})
      if (tree.hasChildren) {
        this.params = {
          'parentId': tree.id,
          'delFlag': 0,
          'pageSize': 100
        }
        getAreaList(this.params).then(res => {
          if (res.data.code === '200') {
            for (let i = 0; i < res.data.result.list.length; i++) {
              if (res.data.result.list[i].type !== '4' || !res.data.result.list[i].type) {
                this.$set(res.data.result.list[i], 'hasChildren', true)
              }
            }
            this.params.pageSize = res.data.result.count
            resolve(res.data.result.list)
          }
        })
      }
    },
    // 编辑后懒加刷新数据
    getAreaList1 (opt) {
      if (opt === 'add') {
        if (this.params.parentId === 0) {
          this.getList({
            'parentId': 0,
            'delFlag': 0
          })
          return
        }

      // 国级修改以后懒加载
        const {tree, treeNode, resolve} = this.maps.get('100000')
        this.load(tree, treeNode, resolve)
      } else {
        if (this.params.parentId === 0) {
          this.getList({
            'parentId': 0,
            'delFlag': 0
          })
          return
        }
        const {tree, treeNode, resolve} = this.maps.get(this.params.parentId)
        this.load(tree, treeNode, resolve)
      }
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  },
  mounted () {
    this.getList(this.params)
    console.log(this.tableData1)
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-table .warning-row {
  background: #f7f7f7;
}
.from-container {
  margin-bottom: 10px;

}

.el-table .success-row {
  background: #f0f9eb;

}
</style>
